<!--
1. 从服务端获取列表数据
2. 我们可以通过 Vue.http.options.root 来进行全局根域配置，
3. 通过Vue.http.options.emulateJSON 来全局配置emualteJSON
4.
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../lib/vue.js"></script>
    <script src="../lib/vue-resource.js"></script>
    <style>
        table,thead,tr,th,tbody,td{
            border: black solid 1px;
            background-color: lightgoldenrodyellow;
        }
    </style>
</head>
<body>
<div id="app">


    <div>
        <h3>添加</h3>
        <div style="display: inline-block">
            Id:<input type="text" v-model="id">
            Name:<input type="text" v-model="name">
            <input type="button" value="提交" @click="add">
            搜索名称关键字：<input type="text" v-model="keyword">
            <input type="button" @click="search" value="搜索">
        </div>
    </div>


    <table>
        <thead>
        <tr>
            <th>Id</th>
            <th>Name</th>
            <th>Time</th>
            <th>delete</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="item in list" :key="item.id">
            <td>{{item.id}}</td>
            <td>{{item.name}}</td>
            <td>{{item.ctime}}</td>
            <td><a href="" @click.prevent="del(item.id)">删除</a></td>
        </tr>
        </tbody>

    </table>
</div>
<script>

    Vue.http.options.root='http://www.liulongbin.top:3005/';
    Vue.http.options.emulateJSON=true;

    var date=new Date();
    var year=date.getFullYear();
    var month=(date.getMonth()+1).toString().padStart(2,'0');
    var day=date.getDate();
    var today=year+":"+month+":"+day;
    var vm=new Vue({
        el: "#app",
        data:{
            id:'',
            name:'',
            keyword:'',
            list:[
                {id:1,name:'zmj',time:today},
                {id:2,name:'fas',time:today},
            ],

        },
        methods:{

            add(){
                this.$http.post("api/addproduct",{name:this.name},/*{emulateJSON:true}*/)
                    .then(()=>{
                        this.getAllList();
                    })
            },

            del(id){

            },

            search(){
                var newList=[];
                this.list.forEach(item=>{
                    if(item.name.indexOf(this.keyword)!==-1){
                        newList.push(item);
                    }
                });
                this.list=newList;
            },
            getAllList(){
                this.$http.get('api/getprodlist').then(result=>{
                    if(result.body.status===0){
                        this.list=result.body.message;
                    }else{
                        console.log("result.status!==0");
                    }
                })
            },
        },
        created(){
            console.log("created");
            this.getAllList();
        }
    })
</script>
</body>
</html>